<template>
  <div class="housecomment-content">
    <div class="housecomment-title-box">
      <p class="housecomment-title">评价房源</p>
      <span @click="toPublishComment">发表</span>
    </div>
    <div class="comment-box">
      <van-field
        v-model="message"
        rows="3"
        autosize
        type="textarea"
        maxlength="100"
        placeholder="请输入评论"
        show-word-limit
      />
    </div>
    <p class="comment-title">房源的评价({{commentList.length}})</p>
    <div class="nocomment-box" v-if="commentList.length == 0">此房子还没有评论~</div>
    <div class="commenttext-box" v-for="item of commentList" :key="item.id" v-else>
      <div class="commentuserinfo-box">
        <img :src="staticpath+item.user.header" v-if="item.user.header" />
        <img src="~/assets/img/headImg/defaultHead.jpg" class="headerimg-box" v-else />
        <span>{{item.user.nickName}}</span>
      </div>
      <div class="commenttext-box">{{item.context}}</div>
    </div>
  </div>
</template>

<script>
import { getHouseComment, addHouseComment } from "network/housedetail";
import { mapState } from "vuex";

export default {
  name: "housecomment",
  data() {
    return {
      commentList: [],
      message: "",
      staticpath: localStorage.getItem("staticpath"),
    };
  },
  methods: {
    toPublishComment() {
      let context = this.message;
      let houseId = this.$route.query.houseId;
      let userId = this.userId;
      let orderId = this.$route.query.orderId;
      if(context.trim().length == 0){
        this.$toast({
          message:"评论不能为空",
          position:"bottom"
        })
        return 
      }
      addHouseComment({ context, houseId, userId, orderId }).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.$toast({
            message: "评论成功",
            position: "bottom",
          });
          this.message = "";
          this.toGetHouseComment();
          this.$router.back()
        }
      });
      this.$emit("toPublishComment")
    },
    toGetHouseComment() {
      let houseId = this.$route.query.houseId;
      getHouseComment({ houseId }).then((res) => {
        console.log(res);
        if(res.code == 200){
          this.commentList = res.data;
        }
      });
    },
  },
  created() {
    this.toGetHouseComment();
  },
  computed: {
    ...mapState({
      userId: (state) => state.moduleUser.userId,
    }),
  },
};
</script>

<style scoped>
.housecomment-content {
  border-top: 10px solid #eee;
  padding: 20px 20px 0;
}
.comment-title {
  font-size: 16px;
  font-weight: 700;
}
.commentuserinfo-box {
  height: 25px;
  margin-top: 10px;
  margin-bottom: 8px;
}
.commentuserinfo-box img {
  width: 25px;
  height: 25px;
  border-radius: 25px;
  overflow: hidden;
  vertical-align: middle;
  margin-right: 10px;
}
.commentuserinfo-box > span {
  font-size: 12px;
}
.commenttext-box {
  font-size: 12px;
}
.nocomment-box {
  margin-top: 10px;
  font-size: 13px;
}
.housecomment-title-box {
  display: flex;
  justify-content: space-between;
}
.comment-box {
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
}
.comment-box .van-field {
  padding: 0;
}
.housecomment-title {
  font-size: 16px;
  font-weight: 550;
  margin-bottom: 10px;
}
.housecomment-title-box > span {
  font-size: 14px;
  font-weight: 550;
  margin-bottom: 10px;
}
</style>